<template>
    <div class="hege">
        <section class="hz-head">
            <div><input class="s-input" type="text" name="" id="trigger1" placeholder="请选择片区" v-model="form.areaName" @focus="stopFocus1"></div>
            <div><input class="s-input" type="text" name="" id="trigger2" placeholder="请选择点位" v-model="form.siteName" @focus="stopFocus4"></div>
            <div><input class="s-input" type="text" ref="date1" placeholder="请选择起始日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus2" v-model="form.startTime" /></div>
            <div><input class="s-input" type="text" ref="date2" placeholder="请选择截止日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus3" v-model="form.endTime" /></div>
        </section>
        <section class="pq-table">
            <div v-for="item in list" :key="item.value">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th colspan=4>{{item.pojName}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>检测次数</td>
                            <td>{{item.total}}</td>
                            <td>环比%</td>
                            <td>{{(item.ringRatio*100).toFixed(2)}}%</td>
                        </tr>
                        <tr>
                            <td>合格次数</td>
                            <td>{{item.hegeNum}}</td>
                            <td>同比%</td>
                            <td>{{(item.yearRatio*100).toFixed(2)}}%</td>
                        </tr>
                        <tr>
                            <td>合格率%</td>
                            <td>{{(item.hegeRate*100).toFixed(2)}}%</td>
                            <td>月均值</td>
                            <td>{{item.mouthValue}}</td>
                        </tr>
                        <tr>
                            <td>国际限值</td>
                            <td>{{item.limtValue}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</template>

<script>
import MobileSelect from 'mobile-select'
export default {
    data() {
        return {
            mobileSelect1: '',
            mobileSelect2: '',
            calendardatetime1: '',
            calendardatetime2: '',
            form: {
                areaId: '',
                areaName: '',
                siteId: '',
                siteName: '',
                startTime: '',
                endTime: '',
                param: ''
            },
            arealist: '',
            siteslist: [],
            list: [],
        }
    },
    watch: {
        'form.areaId'() {
            this.form.siteId = ''
            this.form.siteName = ''
            this.getsiteslist(() => {
                this.mobileSelect2.updateWheel(0, this.siteslist)
            })
        },
        'form.areaName'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.siteId'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.startTime'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.endTime'() {
            this.getList(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        }
    },
    mounted() {
        this.getarealist()
        this.getList(() => {

        })
    },
    methods: {
        //片区列表
        getarealist() {
            this.$api.huizong.arealist().then(res => {
                if (res.success) {
                    this.arealist = res.data
                }
            })
        },
        //点位列表
        getsiteslist(callback) {
            this.$api.dianwei.sites({
                areaId: this.form.areaId
            }).then(res => {
                if (res.success) {
                    this.siteslist = res.data
                    callback()
                }
            }).catch(err => {
                // console.log(err)
            });
        },
        //合格率列表
        getList(callback) {
            this.$api.dianwei.siteAssay(this.form).then(res => {
                if (res.success) {
                    this.list = res.data
                    callback()
                }
            })
        },
        //取消默认操作,加载下拉
        stopFocus1() {
            var that = this
            document.activeElement.blur();
            if (!this.mobileSelect1) {
                this.mobileSelect1 = new MobileSelect({
                    trigger: "#trigger1",
                    // title: "单项选择",
                    wheels: [
                        {
                            data: this.arealist
                        }
                    ],
                    keyMap: {
                        id: 'areaId',
                        value: 'areaName'
                    },
                    callback: function (indexArr, data) {
                        // console.log(data)
                        that.form.areaId = data[0].areaId
                        that.form.areaName = data[0].areaName
                    }
                })
            }
        },
        stopFocus4() {
            document.activeElement.blur();
            if (this.form.areaId != '') {
                var that = this
                if (!this.mobileSelect2) {
                    this.mobileSelect2 = new MobileSelect({
                        trigger: "#trigger2",
                        // title: "单项选择",
                        wheels: [
                            {
                                data: this.siteslist
                            }
                        ],
                        keyMap: {
                            id: 'siteId',
                            value: 'siteName'
                        },
                        callback: function (indexArr, data) {
                            // console.log(data)
                            that.form.siteId = data[0].siteId
                            that.form.siteName = data[0].siteName
                        }
                    })
                }
            } else {
                this.$$tip({
                    content: '请选择片区！'
                })
            }
        },
        stopFocus2() {
            document.activeElement.blur();
            if (!this.calendardatetime1) {
                this.calendardatetime1 = new lCalendar()
                this.calendardatetime1.init({
                    'trigger': this.$refs.date1,
                    'type': 'date'
                });
            }
        },
        stopFocus3() {
            document.activeElement.blur();
            if (!this.calendardatetime2) {
                this.calendardatetime2 = new lCalendar()
                this.calendardatetime2.init({
                    'trigger': this.$refs.date2,
                    'type': 'date'
                });
            }
        }
    }
}
</script>

<style>
</style>
